<template>
  <div class="message-list">
    <!-- 搜索框和日期选择器 -->
    <div class="search-container">
      <div class="search-input-wrapper">
        <i class="fas fa-search search-icon"></i>
        <input
          type="text"
          v-model="searchKeyword"
          placeholder="请输入搜索关键字"
          class="search-input"
        />
      </div>
      <div class="date-picker">
        <div class="date-input-group">
          <label for="start-date">开始日期:</label>
          <input type="date" v-model="startDate" id="start-date" />
        </div>
        <div class="date-input-group">
          <label for="end-date">结束日期:</label>
          <input type="date" v-model="endDate" id="end-date" />
        </div>
      </div>
      <div class="button-group">
        <button @click="search" class="search-button">
          <i class="fas fa-filter"></i> 筛选
        </button>
        <button @click="exportToExcel" class="export-button">
          <i class="fas fa-file-export"></i> 导出Excel
        </button>
      </div>
    </div>

    <!-- 表格部分 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>提交时间</th>
            <th>处理时间</th>
            <th>处理人</th>
            <th>当前进度</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in paginatedTableData" :key="item.backId">
            <td>{{ item.backId }}</td>
            <td>{{ item.detectorName }}</td>
            <td>{{ item.backTime }}</td>
            <td>{{ item.resTime }}</td>
            <td>{{ item.sponsorName }}</td>
            <td>
              <span 
                class="status-tag"
                :class="item.backStatus === 0 ? 'status-pending' : 'status-completed'"
              >
                {{ item.backStatus === 0 ? '未回复' : '已回复' }}
              </span>
            </td>
            <td>
              <button
                v-if="item.backStatus === 0"
                @click="handleAction(item.backId)"
                class="action-button process"
              >
                去处理
              </button>
              <button
                v-else
                @click="viewDetails(item.backId)"
                class="action-button view"
              >
                查看
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页器 -->
    <pagination
      :current-page="currentPage"
      :total-items="tableData.length"
      :items-per-page="pageSize"
      @page-changed="goToPage"
      @items-per-page-changed="updatePageSize"
    />
  </div>
</template>

<script>
import { generateMessageData } from "@/utils/mockData";
import * as XLSX from "xlsx/xlsx.mjs";
import Pagination from "@/components/Pagination.vue";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      searchKeyword: "",
      startDate: "",
      endDate: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      jumpPage: 1,
    };
  },
  created() {
    this.getMessageList();
    this.$http.get("/getAllFeedback").then((result) => {
      console.log(result.data);
      this.tableData = result.data;
    });
  },
  computed: {
    maxPage() {
      return Math.ceil(this.tableData.length / this.pageSize);
    },
    paginatedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  methods: {
    // 获取留言列表
    async getMessageList() {
      try {
        const allData = generateMessageData(100);
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;

        // 模拟搜索和日期筛选
        let filteredData = allData;
        if (this.searchKeyword) {
          filteredData = filteredData.filter((item) =>
            item.detecName.includes(this.searchKeyword)
          );
        }
        if (this.startDate && this.endDate) {
          filteredData = filteredData.filter((item) => {
            const date = new Date(item.backTime);
            return (
              date >= new Date(this.startDate) && date <= new Date(this.endDate)
            );
          });
        }

        this.tableData = filteredData;
        this.total = filteredData.length;
      } catch (error) {
        console.error('获取留言列表失败:', error);
      }
    },

    // 处理留言
    handleAction(backId) {
      this.$router.push({
        name: "reply",
        params: { backID: backId },
      });
    },

    // 查看留言详情
    viewDetails(backId) {
      this.$router.push({
        name: "check_reply",
        params: { backID: backId },
      });
    },

    // 导出Excel
    exportToExcel() {
      try {
        const exportData = this.tableData.map((item) => ({
          序号: item.backId,
          姓名: item.detectorName,
          提交时间: item.backTime,
          处理时间: item.resTime,
          处理人: item.sponsorName,
          当前进度: item.backStatus === 0 ? "未回复" : "已回复",
        }));

        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.json_to_sheet(exportData);

        ws["!cols"] = [
          { wch: 8 },
          { wch: 15 },
          { wch: 20 },
          { wch: 20 },
          { wch: 15 },
          { wch: 15 },
        ];

        XLSX.utils.book_append_sheet(wb, ws, "留言列表");
        XLSX.writeFile(wb, "留言管理列表.xlsx");

        this.$message.success("导出成功");
      } catch (error) {
        console.error("导出失败:", error);
        this.$message.error("导出失败");
      }
    },

    // 分页相关方法
    goToPage(page) {
      if (page >= 1 && page <= this.maxPage) {
        this.currentPage = page;
      }
    },

    updatePageSize(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      this.getMessageList();
    },

    // 搜索和筛选
    search() {
      this.currentPage = 1;
      this.getMessageList();
    },

    filterByDate() {
      this.currentPage = 1;
      this.getMessageList();
    },
  },
};
</script>

<style scoped>
.message-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-input-wrapper {
  position: relative;
  width: 300px;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 35px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.date-picker {
  display: flex;
  gap: 15px;
}

.date-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input-group label {
  color: #606266;
  font-size: 14px;
}

.date-input-group input {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.3s;
}

.date-input-group input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.button-group {
  display: flex;
  gap: 10px;
}

.button-group button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.search-button {
  background-color: #409eff;
  color: white;
}

.search-button:hover {
  background-color: #66b1ff;
}

.export-button {
  background-color: #67c23a;
  color: white;
}

.export-button:hover {
  background-color: #85ce61;
}

.table-container {
  margin-top: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

tr:hover {
  background-color: #f5f7fa;
}

.status-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.status-pending {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.action-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-button.process {
  background-color: #e6a23c;
  color: white;
}

.action-button.process:hover {
  background-color: #ebb563;
}

.action-button.view {
  background-color: #409eff;
  color: white;
}

.action-button.view:hover {
  background-color: #66b1ff;
}

@media screen and (max-width: 768px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .date-picker {
    flex-direction: column;
  }
}
</style>
